<template>
    <div class="app-breadcrumb">
      <el-breadcrumb separator="/">
        <transition-group name="breadcrumb" >
          <template v-for="item in breadcrumbs" :key="item.name">
            <el-breadcrumb-item :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
          </template>
        </transition-group>
      </el-breadcrumb>
    </div>
</template>

<script setup>
const props = defineProps({
  breadcrumbs: {
    type: Array,
    defualt: () => []
  }
})

</script>

<style lang='less' scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
  color: #97a8be;

  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
// /deep/ .el-breadcrumb__inner {
//   font-weight: normal !important;
//   color: black !important;
// }

</style>